<template>
  <div class="page full">
    <Header></Header>
    <u-tabs
      :list="tabMenus"
      :current="currentTab"
      lineWidth="20"
      :scrollable="false"
      @change="tabChangeAction"
    >
    </u-tabs>

    <scroll-view
      v-if="currentTab === 0"
      class="scroll"
      scroll-y="true"
      @refresherrefresh="refreshAction"
      @scrolltolower="toLowerAction"
      refresher-enabled="true"
    >
      <div class="grid box-border column_2 p_xs">
        <div
          class="grid-item box-border p_xs"
          v-for="item in dataList"
          :key="item.id"
        >
          <Good
            @click="navigate(`/pages/detail/detail?id=${item.id}`)"
            :good="item"
          ></Good>
        </div>
      </div>
    </scroll-view>

    <div v-if="currentTab === 1" class="section pitch_default p_default">
      <div class="row">三个月前</div>
      <div class="row">
        <Dynamic></Dynamic>
      </div>
      <div class="row">
        <Dynamic></Dynamic>
      </div>
      <div class="row">
        <Dynamic></Dynamic>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserGoodList } from '@/api/good.api';
import { pageMixin } from '../../mixins/index';
import Header from '../../components/header/header.vue';
import { navigate } from '../../service/navigate';
import Good from '../../components/good/good.vue';
import Dynamic from '../../components/dynamic/dynamic.vue';
export default {
  mixins: [
    pageMixin(getUserGoodList, {
      type: 'review',
    }),
  ],
  components: {
    Header,
    Good,
    Dynamic,
  },
  data() {
    return {
      currentTab: 0,
      tabMenus: [
        {
          name: '闲置',
          key: 'goods',
        },
        {
          name: '动态',
          key: 'trends',
        },
      ],
    };
  },
  methods: {
    navigate,
    tabChangeAction(item) {
      this.currentTab = item.index;

      console.log('item', item);
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  height: calc(100% - 160px);
}

.tabs {
  /deep/ .van-tabs__content {
    width: 100%;
    height: calc(100% - 44px);
  }
}
</style>
